
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>你对JWT了解多少 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>你对JWT了解多少 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">什么是JWT？与传统的服务器端会话管理相比，它有什么优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JWT（JSON Web Token）是一种开放标准（RFC 7519），它定义了一种紧凑且自包含的方式，用于在各方之间作为JSON对象安全地传输信息。与传统的服务器端会话管理相比，JWT是无状态的，服务器不需要存储会话数据，这减少了服务器的负担并提高了系统的可扩展性。</div>
          </div>
          <div class="card-source">来源: JWT 简介</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">一个完整的JWT由哪三个部分组成？它们之间是如何分隔的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JWT由三部分组成：Header（头部）、Payload（负载）和Signature（签名）。这三部分经过Base64Url编码后，使用点（.）分隔符连接起来，形成一个完整的JWT字符串。</div>
          </div>
          <div class="card-source">来源: JWT 的结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">JWT的Header（头部）部分通常包含哪两个关键属性？它们分别代表什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JWT的Header部分通常包含两个属性：'alg'和'typ'。'alg'用于指定生成签名所使用的算法，例如HS256（HMAC SHA256）或RS256（RSA）。'typ'则表示令牌的类型，通常固定为'JWT'。</div>
          </div>
          <div class="card-source">来源: 1. Header（头部）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">结构</div>
          <div class="card-question">JWT的Payload（负载）中包含的声明（claims）可以分为哪三类？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">结构</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Payload中的声明分为三类：1. 注册声明（Registered Claims），是预定义的标准声明，如iss（发布者）、exp（过期时间）等；2. 公共声明（Public Claims），可自定义但需避免冲突；3. 私有声明（Private Claims），是通信双方约定使用的声明。</div>
          </div>
          <div class="card-source">来源: 2. Payload（负载）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">JWT的签名（Signature）部分是如何生成的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">签名是通过将经过Base64Url编码的Header和Payload用点（.）连接起来，然后使用Header中指定的签名算法（如HMAC SHA256）和密钥（secret）对这个连接后的字符串进行加密生成的。</div>
          </div>
          <div class="card-source">来源: 3. Signature（签名）</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">服务器在收到客户端请求时，验证JWT的流程是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">服务器验证JWT的流程主要包括四步：1. 从请求中提取JWT；2. 解析JWT，将其分割成Header、Payload和Signature三部分；3. 使用相同的算法和密钥重新生成签名，并与收到的签名进行比对以验证完整性；4. 检查Payload中的声明是否有效，例如令牌是否已过期（exp声明）。</div>
          </div>
          <div class="card-source">来源: 2. JWT 的验证流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">JWT支持的HMAC和RSA签名算法在密钥管理上有什么根本区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HMAC是 noirâtres加密算法，签名和验证都使用同一个共享的秘密密钥（secret）。而RSA是非对称加密算法，它使用私钥进行签名，使用与之配对的公钥进行验证。这使得RSA适用于公私钥可以分别存储在不同系统的场景。</div>
          </div>
          <div class="card-source">来源: JWT签名算法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">JWT主要有哪些应用场景？请列举至少三个。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JWT的应用场景非常广泛，主要包括：1. 身份验证（Authentication），如在分布式系统和单点登录（SSO）中取代传统Session；2. 授权（Authorization），通过在Payload中包含角色或权限信息来控制资源访问；3. 信息交换（Information Exchange），在前后端分离或跨域应用中安全地传递信息。</div>
          </div>
          <div class="card-source">来源: JWT使用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在使用JWT时，需要注意哪些安全事项？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">使用JWT时需要注意以下安全事项：1. 避免在JWT中存储敏感信息，因为Payload部分是可解码的；2. 必须合理设置JWT的过期时间（exp声明），以减少令牌被盗用的风险；3. 必须保证签名密钥的安全存储和管理，防止泄露导致令牌被伪造。</div>
          </div>
          <div class="card-source">来源: 4. JWT 的注意事项</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
